<template>
  <section style="height:100%;">
    <van-nav-bar title="异常调整"
                 fixed
                 @click-left="onClickLeft"
                 @click-right="onClickRight">
      <van-icon name="arrow-left"
                slot="left"
                color="#333"
                size="0.6rem" />
      <van-icon :name="require('@/assets/img/computer.png')"
                slot="right"
                color="#333"
                size="0.6rem" />
    </van-nav-bar>

    <div class="container">
      <div class="sub">
        <van-cell v-for="(item,index) in errList"
                  :key="index"
                  @click="handelAddError(index)"
                  :value="setPageres(item.modifyReason)"
                  :label="`¥ ${item.abnormalFee}`"
                  title="调整金额"
                  size="large"
                  center
                  is-link
                  :label-class="item.abnormalFee.toString().indexOf('-')!=-1?'cell-label-fu':'cell-label'">
          <div class="cell-left-icon"
               slot="icon"
               @click.stop="deleteItem(index)">
            <van-icon class-prefix="my-icon"
                      name="iconjian"
                      color="red"
                      size="0.6rem" />
          </div>
        </van-cell>
      </div>

      <div class="continue"
           @click="handelAddError('new')">
        <van-icon :name="require('@/assets/img/continue.png')"
                  color="#333"
                  size="0.6rem" />
        <span class="continue-text">继续添加</span>
      </div>
      <van-field v-model="orderData.modifyRemark"
                 rows="1"
                 autosize
                 size="large"
                 label="异常调整备注"
                 type="textarea"
                 maxlength="50"
                 placeholder="请输入"
                 show-word-limit
                 input-align="right"
                 label-width="2.6rem" />

    </div>

    <div class="footer">
      <div class="btn-wrap">
        <div class="btn-left"
             @click="handelCanel">
          <span>取消</span>
        </div>
        <div class="btn-right"
             :class="{'disabled-btn':saveStatus}"
             @click="handelSure">
          <span>保存</span>
        </div>
      </div>
    </div>

  </section>
</template>

<script>

import { orderSelect, orderChange } from '@/api/order';
export default {
  data () {
    return {
      errList: [],
      actionsPick: [
        // { name: '无', index: 0 },
        { name: '超时', index: 1 },
        { name: '破损', index: 2 },
        { name: '丢失', index: 3 },
        { name: '其他', index: 4 }
      ],
      orderId: '',
      orderData: {
        modifyRemark: ''
      },
      saveStatus: false,
      isSelect: false
    };
  },
  beforeRouteEnter (to, from, next) {
    let isSelect = false;

    if (from.path === '/adjust/detail' || from.path == '/' || from.path == '/adjust') {
      isSelect = true;
    }
    next((vm) => {
      vm.isSelect = isSelect;
    });

  },
  mounted () {
    setTimeout(() => {
      this.orderId = this.$route.query.orderId;
      if (this.orderId) {
        this.getData();
      }
    }, 20);
  },
  watch: {

  },
  methods: {
    getData () {
      orderSelect(this.orderId).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.orderData.tiHuoPrice = this.orderData.kaArPickUp ? this.orderData.kaArPickUp : 0;
          this.orderData.faHuoPrice = this.orderData.kaArSend ? this.orderData.kaArSend : 0;
          this.orderData.ganXianPrice = this.orderData.kaArFreight ? this.orderData.kaArFreight : 0;
          this.orderData.pushPlatform = this.orderData.pushPlatformPc;

          // 又不回显了
          this.orderData = res.data;
          let data = sessionStorage.getItem('bd-h5-selecterror') || null;

          this.errList = data ? JSON.parse(data) : [];
          // if (this.isSelect) {
          //   this.orderData = res.data;
          //   let data = sessionStorage.getItem('bd-h5-selecterror')||null;

          //   this.errList = data?JSON.parse(data):[];
          // } else {
          //   this.orderData = res.data;
          //   this.errList = res.data.kaOrderAbnormals;
          //   sessionStorage.setItem('bd-h5-selecterror',JSON.stringify(this.errList));
          // }
          if (!this.orderData.modifyRemark) {
            this.orderData.modifyRemark = '';
          }
        }

      });
    },
    handelAddError (index) {
      sessionStorage.setItem('bd-h5-selecterror', JSON.stringify(this.errList));
      this.$router.push({
        path: '/adjust/detail',
        query: {
          edit: index
        }
      });
    },
    deleteItem (index) {
      this.$dialog.confirm({
        title: '确认',
        message: '确定要删除该异常调整?'
      }).then(() => {
        this.errList.splice(index, 1);
        sessionStorage.setItem('bd-h5-selecterror', JSON.stringify(this.errList));
      }).catch(() => {
        // on cancel
      });
    },
    setPageres (index) {
      return this.actionsPick[index].name || '';
    },
    onClickLeft () {

      sessionStorage.removeItem('bd-h5-selecterror');
      this.$router.back();
    },
    onClickRight () {
      let url = window.location.host;

      let index = url.indexOf('pre');

      if (index <= -1) {
        window.location.href = 'https://ka.lecarlink.com/index.aspx';
      } else {
        window.location.href = 'https://ka-pre.lecarlink.com/index.aspx';
      }
    },
    handelCanel () {
      this.onClickLeft();
      console.log('handelChangeOrder');
    },
    handelSure () {
      if (this.orderData.modifyStatus == 1) {
        this.$toast.fail('该订单异常调整正在审核中');
        return;
      }
      if (!this.errList || this.errList.length == 0) {
        this.$toast.fail('请填写异常调整内容');
        return;
      }
      if (!this.orderData.modifyRemark) {
        this.$toast.fail('请填写异常调整备注');
        return;
      }
      let errArr = this.errList.map(item => item.modifyReason);

      const del = arr => Array.from(new Set(arr));

      del(errArr);
      console.log(del(errArr));
      // return;
      if (del(errArr).length != this.errList.length) {
        this.$toast.fail('调整原因不能相同');
        return;
      }


      if (this.orderData.modifyStatus == 1) {
        this.$toast.fail('该订单异常调整正在审核中');
        return;
      }
      this.saveStatus = true;
      this.orderData.kaOrderId = this.orderId;
      this.orderData.isAbnomal = 1;
      this.orderData.abnomalList = this.errList;
      this.orderData.carrierFlag = 0; // 确认承运的标识
      this.orderData.peoplePrice = (Number(this.orderData.ganXianPrice) + Number(this.orderData.faHuoPrice) + Number(this.orderData.tiHuoPrice)).toFixed(2);
      console.log(this.orderData);
      orderChange(this.orderData).then(res => {
        console.log(res);
        if (res.code == 200) {
          sessionStorage.removeItem('bd-h5-selecterror');
          this.$router.back();
          this.saveStatus = false;
        }
      }).catch(() => {
        this.saveStatus = false;
      });
      console.log('handelSure');
    }
  },
  components: {

  }
};
</script>

<style scoped lang='scss'>
.container {
  background: #f8f8f8;
  padding: 56px 15px 10px 15px;
  font-size: 16px;
  .sub {
    background: #ffffff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    .cell-left-icon {
      margin-right: 10px;
    }
    .cell-label {
      color: #f18d00;
      font-size: 16px;
    }
    .cell-label-fu {
      color: red;
      font-size: 16px;
    }
  }
  .continue {
    padding: 10px;
    background: #fdf3e4;
    border: 1px solid #f18d00;
    box-shadow: 0 2px 4px 0 rgba(118, 83, 9, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 10px 0;
    .continue-text {
      margin-left: 5px;
      color: #f18d00;
      font-size: 18px;
    }
  }
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  text-align: center;
  .btn-wrap {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-left {
      background: #fdf3e4;
      border: 1px solid #f18d00;
      border-radius: 2px;
      color: #f18d00;
      font-size: 18px;
      width: 47%;
      height: 44px;
      line-height: 44px;
      box-sizing: border-box;
    }
    .btn-right {
      width: 47%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      background: #f18d00;
      border: 1px solid #f18d00;
      box-sizing: border-box;
      border-radius: 2px;
      color: #fff;
      &.disabled-btn {
        background: #ccc;
        border: 1px solid #ccc;
      }
    }
  }
}
</style>
